<template>
  <div class="container">
    <div class="search_header">
      <div class="search_line flex">
        <picker
          class="bigsearch"
          mode="selector"
          @change="bindShopChange"
          :value="shopindex"
          :range="shoplist"
          range-key="name"
        >
          <view class="picker flex-item">{{shopname}}</view>
        </picker>
        <picker
          class="bigsearch"
          mode="selector"
          @change="bindArriveChange"
          :value="arriveindex"
          :range="arriveList"
          range-key="name"
        >
          <view class="picker flex-item">{{arrivename}}</view>
        </picker>
      </div>
      <div class="search_line flex">
        <div class="smallsearch" @tap="search">查询</div>
      </div>
    </div>
    <!-- 表格start -->
    <view id="panel">
      <view class="flex-fixed" v-if="getGuestArriveInfoList.length > 0">
        <text class="fixed-text">客户</text>
        <text class="fixed-text">到店次数</text>
        <text class="fixed-text">总现金消费</text>
        <text class="fixed-text">总卡耗消费</text>
        <text class="fixed-text">总金额消费</text>
        <text class="fixed-text">总赠送余额消费</text>
        <text class="fixed-text">总消费</text>
        <text class="fixed-text">平均客次消费</text>
      </view>
      <scroll-view
        class="table-content flex"
        scroll-x="true"
        style="width:100%;white-space: nowrap;"
      >
        <view class="db_table" v-for="item in getGuestArriveInfoList" :key="item.id">
          <text class="flex-cell td" data-td="客户">{{item.name || '0'}}</text>
          <text class="flex-cell td" data-td="到店次数">{{item.num || '0'}}次</text>
          <text class="flex-cell td" data-td="总现金消费">￥{{item.allrecemoney || '0'}}元</text>
          <text class="flex-cell td" data-td="总卡耗消费">￥{{item.allcardreduce || '0'}}元</text>
          <text class="flex-cell td" data-td="总余额消费">￥{{item.allusebalance || '0'}}元</text>
          <text class="flex-cell td" data-td="总赠送余额消费">￥{{item.allusegiftbalance || '0'}}元</text>
          <text class="flex-cell td" data-td="总消费">￥{{item.allmoney || '0'}}元</text>
          <text class="flex-cell td" data-td="平均客次消费">￥{{item.kecimoney || '0'}}元</text>
        </view>
      </scroll-view>
    </view>
    <!-- 表格end -->
    <van-loading type="spinner" class="spinner" size="100px" color="#333" v-if="listshow"/>
  </div>
</template>

<script>
import api from '@/utils/api'
import wx from 'wx'
// import moment from 'moment'
import Toast from '@/utils/toast'
export default {
  data () {
    return {
      getGuestArriveInfoList: [],
      shoplist: [],
      shopindex: 0,
      listshow: false,
      shopid: 0,
      shopname: '',
      arriveindex: 0,
      arrivename: '近一个月',
      arriveList: [
        {
          id: 1,
          name: '近一个月'
        },
        {
          id: 2,
          name: '近三个月'
        },
        {
          id: 3,
          name: '近六个月'
        },
        {
          id: 4,
          name: '近一年'
        }
      ]
    }
  },

  components: {
    // Empty
  },
  onLoad (e) {
    if (e) {
      this.shopid = e.shopid
    }
    this.get_info()
    this.selectshop()
  },
  methods: {
    async get_info () {
      this.listshow = true
      const res = await api.getGuestArriveInfo({ shopid: this.shopid, time: parseInt(Number(this.arriveindex) + 1) });
      console.log(res)
      if (res) {
        this.getGuestArriveInfoList = res;
        this.listshow = false
      } else {
        this.getGuestArriveInfoList = []
        this.listshow = false
      }
    },
    async selectshop () {
      let orcode = wx.getStorageSync('userInfo').orcode
      const res = await api.selectshop({ orcode: orcode });
      if (res) {
        if (res.code === '100') {
          this.shoplist = res.data
          this.shopname = this.shoplist[this.shopindex].name
        } else {
          Toast(res.msg)
        }
      } else {
        Toast('接口错误！');
      }
    },
    bindShopChange (e) {
      console.log(e.mp.detail.value)
      this.shopindex = e.mp.detail.value
      this.shopname = this.shoplist[this.shopindex].name
      this.shopid = this.shoplist[this.shopindex].id
    },
    bindArriveChange (e) {
      this.arriveindex = e.mp.detail.value
      this.arrivename = this.arriveList[this.arriveindex].name
    },
    search () {
      this.get_info()
    }
  },
  created () {
  },
  onShow () {
  },
  onReady () {
  }
}
</script>

<style scoped>
.container {
  width: 100%;
}
.td {
  width: 130rpx;
}
.search_header {
  position: relative;
  width: 100%;
  height: 300rpx;
  padding: 0 60rpx;
  background: url(http://mytimg.178mr.com/ellipse.png) 50% 100%/150% no-repeat;
  font-size: 30rpx;
  color: rgba(255, 255, 255, 1);
}
/* .search_background {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 442rpx;
  background: url(http://mytimg.178mr.com/ellipse@2x.png) no-repeat;
  background-size: 100%;
  z-index: 2;
} */
.bigsearch {
  width: 300rpx;
  height: 80rpx;
  border-radius: 80rpx;
  /* background: #fff url(http://mytimg.178mr.com/dark%20grey@2x.png) no-repeat; */
  background: #fff;
  background-size: 30rpx;
  background-position: 90% 50%;
  line-height: 80rpx;
  text-align: center;
  font-size: 24rpx;
  font-weight: 400;
  color: rgba(51, 51, 51, 1);
}
.smallsearch {
  width: 260rpx;
  height: 80rpx;
  border-radius: 80rpx;
  /* background: #fff url(http://mytimg.178mr.com/dark%20grey@2x.png) no-repeat; */
  background: #fff;
  background-size: 30rpx;
  background-position: 90% 50%;
  line-height: 80rpx;
  text-align: center;
  font-size: 24rpx;
  font-weight: 400;
  color: rgba(51, 51, 51, 1);
  margin-left: 20rpx;
}
.search_line {
  margin-bottom: 30rpx;
}
.search_line:last-child {
  margin-bottom: 0;
}
.datachoose {
  text-align: center;
}
.table-content {
  position: relative;
}
.spinner {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);
}
.td {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: stretch;
  line-height: 80rpx;
  font-size: 24rpx;
  width: 150rpx;
  text-align: center;
}
</style>
<style>
.empty {
  position: absolute;
  top: 50%;
  transform: translateX(-50%) translateY(-50%);
}
</style>
